<template>
  <div class="container-comment">
    <x-img
      :src="userInfor.img_url"
      class="comment-img"
      defaultSrc="https://foruda.gitee.com/avatar/1677022544584087390/4835367_jmysy_1578975358.png"
    ></x-img>
    <el-input
      type="textarea"
      :autosize="{ minRows: 2, maxRows: 4 }"
      placeholder="发表一条友善的评论"
      class="comment-input"
      @input="handleInput"
      :modelValue="sendContent"
    >
    </el-input>
    <lay-button class="comment-send" @click="$emit('clickButton')">发送</lay-button>
  </div>
</template>

<script setup>
import { userInfor } from '@/hooks/userInfor'
import { defineEmits, defineProps } from 'vue'
const emit = defineEmits(['clickButton','update:sendContent'])
const props = defineProps({
  sendContent:{
    type:String
  },
  sendContentModifiers:{
    default(){
      return {}
    }
  }
})
function handleInput(value){
  if(props.sendContentModifiers.cusTrim){
    value = value.trim()
  }
  emit('update:sendContent',value)
}
</script>

<style lang="scss" scoped>
.container-comment {
  display: flex;
  .comment-img {
    width: 50px;
    height: 50px;
    overflow: hidden;
  }
  .comment-input {
    flex: 1;
    margin: 0 10px;
  }
  .comment-send {
    min-height: 50px;
  }
}
</style>
